<template>
  <div :class="['content', type, right]">
    <div class="head">
      <span>{{ tittle }}</span>
      <span v-if="type === 'appsmall'" :style="{ color: color }" class="cp" @click="edit">修改</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      require: String,
      default: ''
    },
    tittle: {
      require: String,
      default: ''
    },
    color: {
      require: String,
      default: '#A5AEBF'
    },
    right: {
      require: String,
      default: ''
    }
  },
  data () {
    return {
      content: 'content'
    }
  },
  methods: {
    edit () {
      if (this.color === 'gray') {
        return false
      } else {
        this.$emit('xiugai')
      }
      // this.$router.push('/serviceManage/appList/edit')
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  // margin-top: 20px;
  // min-height: 934px;
  // height: 100%;
  padding: 0 24px;
}
.big {
  width: 1112px;
  min-height: 934px;
  box-sizing: border-box;
  background-color: #ffffff;
   position: relative;
  border-radius: 8px;

  .head {
    width: 100%;
    height: 79px;
    border-bottom: 1px solid #e6e9f0;

    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    span {
      position: absolute;
      bottom: 20px;
    }
  }
}
.small {
  width: 500px;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0 24px;
  border-radius: 8px;
  position: relative;
  .head {
    width: 100%;
    height: 79px;
    border-bottom: 1px solid #e6e9f0;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    position: relative;
    span {
      position: absolute;
      bottom: 20px;
      &:nth-child(1) {
        left: 0;
      }
      &:nth-child(2) {
        right: 0;
      }
    }
  }
}

.appsmall {
  width: 500px;
  min-height: 934px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0 24px;
  position: relative;
  .head {
    width: 100%;
    height: 79px;
    border-bottom: 1px solid #e6e9f0;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    position: relative;
    span {
      position: absolute;
      bottom: 20px;
      &:nth-child(1) {
        left: 0;
      }
      &:nth-child(2) {
        right: 0;
      }
    }
  }
}
.right {
  margin-left: 20px;
}
</style>
